<template>
	<view class=" p-8 static">
		<view class="fixed h-screen w-screen" style="z-index: -100; background: linear-gradient(to bottom, white 0%, #E2F2FD 40%, #4BBDFF 100%); top: 0; left:0"></view>
		<view class="w-full flex flex-col align-items-center">
			<view class="border-5 mt-10" style="width: 105rpx; height: 105rpx; border-radius: 50%; overflow: hidden;color: #2C2C2C;">
				<image v-if="userInfo.phone" class="w-full h-full" mode="aspectFill" :src="userInfo.avatar?userInfo.avatar:'/static/logo.png'" @tap="toInfo"></image>
				<image v-else class="w-full h-full" mode="aspectFill" :src="userInfo.avatar?userInfo.avatar:'/static/logo.png'" @tap="navigateTo('/pages/login')"></image>
			</view>
			<view class="mt-15 text-bold text-16">
				<text v-if="userInfo.phone" @tap="toInfo">{{userInfo.company ? userInfo.company : userInfo.nickname}}</text>
				<text v-else @tap="navigateTo('/pages/login')">点击登录</text>
			</view>
		</view>
		<view class="border-1 rounded-base bg-white" style="border-color: #BBB; margin-top: 80rpx;">
			<view class=" bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="navigateTo('/pages/user/amount')">
					<view class="mr-5" style="width: 66rpx; height: 66rpx;">
						<image class="w-full h-full" src="/static/user-amount.png"></image>
					</view> 
					<view class="flex-1">账单管理</view>
					<view class=""> ></view>
				</view>
			</view>
			
			<view class="bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="toCertification">
					<view class="mr-5" style="width: 66rpx; height: 66rpx;">
						<image class="w-full h-full" src="/static/user-idcard.png"></image>
					</view> 
					<view class="flex-1">企业认证</view>
					<view class="" v-if="userInfo.is_verification">已认证 ></view>
				</view>
			</view>
			
			<view class=" bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="toShare">
					<view class="mr-5" style="width: 66rpx; height: 66rpx;">
						<image class="w-full h-full" src="/static/user-share.png"></image>
					</view> 
					<view class="flex-1">分享海报</view>
				</view>
			</view>
			
			<view class=" bottom-line">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="navigateTo('/pages/user/servicer')">
					<view class="mr-5" style="width: 66rpx; height: 66rpx;">
						<image class="w-full h-full" src="/static/user-servicer.png"></image>
					</view> 
					<view class="flex-1">联系客服</view>
				</view>
			</view>
			
			<view class=" ">
				<view class="flex flex-row text-14 align-items-center ml-5 mr-10" style="height: 86rpx;"  @tap="navigateTo('/pages/user/note')">
					<view class="mr-5" style="width: 66rpx; height: 66rpx;">
						<image class="w-full h-full" src="/static/user-note.png"></image>
					</view> 
					<view class="flex-1">企业须知</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import request from '/utils/request.js';
	export default {
		data() {
			return {
			
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			
		},
		onShow() {
			request.post('merchant/userInfo').then(res=>{
				this.setUserInfo(res);
			})
		},
		onReachBottom() {
			
		},
		onShareAppMessage() {
			return {
			  title: '飞兔企业版',
			  path: '/pages/task/index',
			  // imageUrl : ''
			}
		},
		onShareTimeline() {
			return {
			  title: '飞兔企业版',
			  // query: '',
			  // imageUrl : ''
			}
		},
		methods: {
			...mapMutations(['login', 'setUserInfo']),
			navigateTo($url){
				uni.navigateTo({
					'url': $url
				})
			},
			
			// 跳转认证
			toCertification(){
				if(!this.userInfo.phone){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						this.navigateTo('/pages/login')
					},1000)
				}else{
					this.navigateTo('/pages/user/certification')
				}
			},
			
			
			// 跳转分享
			toShare(){
				if(!this.userInfo.phone){
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(()=>{
						this.navigateTo('/pages/login')
					},1000)
				}else{
					this.navigateTo('/pages/user/share')
				}
			},
			
			// 跳转编辑信息
			toInfo(){
				if(this.userInfo.phone){
					this.navigateTo('/pages/user/info')
				}
			},
		}
	}
</script>

<style>
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
</style>
